<template>
  <div class="layout_box" style="height: 100%">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button v-if="isCollapse" :label="false">展开</el-radio-button>
      <el-radio-button v-else :label="true"> 收起</el-radio-button>
    </el-radio-group>
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#d9d8d8f5"
      collapse-transition
      :collapse="isCollapse"
      unique-opened
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <el-sub-menu
        :index="index + 1 + ''"
        v-for="(item, index) in routerList"
        :key="index"
      >
        <template #title>
          <!-- <el-icon><HomeFilled /></el-icon> -->

          <el-icon>
            <component class="icons" :is="item.icon"></component>
          </el-icon>

          <!-- <el-icon > <component :is="item.icon"  /> </el-icon> -->
          <span>{{ item.title }}</span>
          <!-- <span>{{ item.icon }}</span> -->

          <!-- <span>{{ item.path }}</span> -->
        </template>
        <el-menu-item-group
          v-for="(item2, index2) in item.children"
          :key="index2"
        >
          <el-menu-item :index="item2.path">
            <el-icon>
              <component class="icons" :is="item2.icon"></component>
            </el-icon>

            {{ item2.name }}</el-menu-item
          >
          <!-- <el-menu-item index="1-2">item two</el-menu-item> -->
        </el-menu-item-group>
      </el-sub-menu>

      <!-- <el-sub-menu index="2">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>列表</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">item one</el-menu-item>
          <el-menu-item index="1-2">item two</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu> -->

      <!-- <el-sub-menu index="3">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>角色</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">item one</el-menu-item>
          <el-menu-item index="1-2">item two</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu> -->
    </el-menu>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import { useRouter, useRoute } from "vue-router";

// import {
//   HomeFilled,
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from "@element-plus/icons-vue";

const $router = useRouter(); // 获取全部路由
const $route = useRoute(); // route是当前路由对象
let routerList = reactive([]);

const isCollapse = ref(true);
const handleOpen = () => {
  console.log(111);
  console.log($route.path, "quey传"); // quey传递过来的参数都是字符串类型
};
const handleClose = () => {
  console.log(2222);
  console.log($route.path, "quey传递过来的参数都是字符串类型"); // quey传递过来的参数都是字符串类型
};
onBeforeMount(() => {
  console.log($router.options.routes[1], "9877"); //获取路由信息
  routerList = $router.options.routes[1].children;
  console.log($route.path, $route.params); // quey传递过来的参数都是字符串类型
  console.log(routerList, "qqq");
});
onMounted(() => {});
</script> 
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>